<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客园风格界面</title>
  <style>
    /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #333;
      color: white;
      display: flex;
    }

    /* 左侧导航栏样式 */
    #left - nav {
      width: 200px;
      height: 100vh;
      background-color: #222;
      padding: 20px;
    }

    .nav - item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .nav - item img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    /* 中间主要内容区样式 */
    #main - content {
      flex: 1;
      padding: 20px;
    }

    #search - bar input {
      width: 100%;
      height: 30px;
      background-color: transparent;
      border: 1px solid white;
      color: white;
      padding: 0 10px;
    }

    #blog - header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    #blog - header img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 20px;
    }

    #blog - info {
      flex: 1;
    }

    #blog - tags span {
      margin-right: 10px;
    }

    .blog - article {
      border: 1px solid #444;
      padding: 10px;
      margin-bottom: 10px;
    }

    .article - footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }

    .article - footer button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

    /* 右侧边栏样式 */
    #right - sidebar {
      width: 300px;
      height: 100vh;
      background-color: #222;
      padding: 20px;
    }

    #calendar {
      text-align: center;
      margin-bottom: 20px;
    }

    #calendar img {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    #calendar table {
      width: 100%;
    }

    #calendar td {
      border: 1px solid #444;
      padding: 5px;
      text-align: center;
    }

    .current - day {
      background-color: #007BFF;
      color: white;
    }

    #quick - links {
      margin-bottom: 20px;
    }

    .link - item {
      margin-bottom: 5px;
      cursor: pointer;
    }

    #theme - toggle {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }

    #theme - toggle img {
      width: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
  <!-- 左侧导航栏 -->
  <div id="left - nav">
    <div class="nav - item">
      <img src="icon_blog.png" alt="博客园">博客园
    </div>
    <div class="nav - item">
      <img src="icon_home.png" alt="首页">首页
    </div>
    <div class="nav - item">
      <img src="icon_new_note.png" alt="新随笔">新随笔
    </div>
    <div class="nav - item">
      <img src="icon_draft.png" alt="草稿箱">草稿箱
    </div>
    <div class="nav - item">
      <img src="icon_contact.png" alt="联系">联系
    </div>
    <div class="nav - item">
      <img src="icon_subscribe.png" alt="订阅">订阅
    </div>
    <div class="nav - item">
      <img src="icon_manage.png" alt="管理">管理
    </div>
    <div class="nav - item">
      <img src="icon_csdn.png" alt="CSDN主页">CSDN主页
    </div>
  </div>

  <!-- 中间主要内容区 -->
  <div id="main - content">
    <div id="search - bar">
      <input type="text" placeholder="search..">
    </div>
    <div id="blog - header">
      <img src="avatar.png" alt="博主头像">
      <div id="blog - info">
        <h2>LogicYarn</h2>
        <span>园龄: 10个月</span>
        <span>粉丝: 0</span>
        <span>关注: 4</span>
      </div>
      <div id="blog - tags">
        <span>有理想, 但不空想</span>
        <span>有希望, 但不奢望</span>
        <span>有作为, 但不妄为</span>
      </div>
    </div>
    <div class="blog - article">
      <h3>博客园博客申请教程，附自定义漂亮主页样式详细教程---2024</h3>
      <p>摘要: 最近在自定义博客园主题页面样式时，遇到一些问题，所以决定写下此文作为第一篇博客。一、申请开通个人博客 1.1 注册账号（步骤略）1.2 申请博客权限 在注册完博客园账号后，在首页右上角点击 -> 我的博客 点击后，会出现如下图所示：按照要求填写申请理由（例如记录个人技术成长，学习笔记记录等）</p>
      <div class="article - footer">
        <span>6</span>
        <span>0</span>
        <span>0</span>
        <button>编辑</button>
        <button>阅读</button>
      </div>
    </div>
    <div class="blog - article">
      <h3>一名ICer的博客开贴记录</h3>
      <p>摘要: 前言 看园子内容已有3 - 4年之久，虽然对于一名ICer来说，园子内容偏少，但是仍然“咸鱼IC”等一众大佬的优质好文，让我知道这是我未来学习技术的一个好地方。也在我心中埋下了一个未来自己也要开始撰写博文的念想，选择园子，希望能够在记录学习笔记的同时，也为开源世界贡献自己的力量！由于本人有较重度的“懒</p>
      <div class="article - footer">
        <span>5</span>
        <span>0</span>
        <span>0</span>
        <button>编辑</button>
        <button>阅读</button>
      </div>
    </div>
  </div>

  <!-- 右侧边栏 -->
  <div id="right - sidebar">
    <div id="calendar">
      <img src="calendar_background.png" alt="日历背景">
      <h4>Autumn Wonderland</h4>
      <p>14 Aug, 2024</p>
      <table>
        <thead>
          <tr>
            <th>日</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
            <th>六</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
          </tr>
          <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td class="current - day">14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
          </tr>
          <tr>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
          </tr>
          <tr>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="quick - links">
      <h4>常用链接</h4>
      <div class="link - item">我的随笔</div>
      <div class="link - item">我的评论</div>
      <div class="link - item">我的参</div>
      <div class="link - item">最新评论</div>
      <div class="link - item">我的标签</div>
    </div>
    <div id="theme - toggle">
      <img src="moon_icon.png" alt="夜间模式">
      <img src="sun_icon.png" alt="日间模式">
    </div>
  </div>
  <script>
    // 目前没有复杂交互逻辑，预留一些可能的交互功能扩展
    // 例如点击导航栏跳转到对应页面、日历点击事件等
    // 这里先简单示例一个点击按钮的提示
    const editButtons = document.querySelectorAll('.article - footer button');
    editButtons.forEach((button) => {
      button.addEventListener('click', function () {
        if (this.textContent === '编辑') {
          alert('进入编辑模式');
        } else {
          alert('进入阅读模式');
        }
      });
    });
  </script>
</body>

</html>